<template>
  <div>
    <a-card title="课程评价分类维护">
      <a-row :gutter="16" style="margin-bottom: 16px">
        <a-col :span="8">
          <a-input-search placeholder="搜索分类名称" @search="onSearch" />
        </a-col>
        <a-col :span="16" style="text-align: right">
          <a-button type="primary" @click="showModal('add')">
            <a-icon type="plus" /> 新增分类
          </a-button>
        </a-col>
      </a-row>

      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        rowKey="id"
        bordered
      >
        <template slot="operation" slot-scope="text, record">
          <a-button type="link" size="small" @click="showModal('edit', record)">编辑</a-button>
          <a-popconfirm
            title="确定要删除此分类吗？"
            @confirm="deleteCategory(record.id)"
            okText="确定"
            cancelText="取消"
          >
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>

    <a-modal
      :title="modalTitle"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :confirmLoading="confirmLoading"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="分类名称">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入分类名称' }]
              }
            ]"
            placeholder="请输入分类名称"
          />
        </a-form-item>
        <a-form-item label="分类编码">
          <a-input
            v-decorator="[
              'code',
              {
                rules: [{ required: true, message: '请输入分类编码' }]
              }
            ]"
            placeholder="请输入分类编码"
          />
        </a-form-item>
        <a-form-item label="排序号">
          <a-input-number
            v-decorator="[
              'sort',
              {
                rules: [{ required: true, message: '请输入排序号' }],
                initialValue: 0
              }
            ]"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="状态">
          <a-switch
            v-decorator="[
              'status',
              {
                valuePropName: 'checked',
                initialValue: true
              }
            ]"
            checkedChildren="启用"
            unCheckedChildren="禁用"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            v-decorator="['remark']"
            placeholder="请输入备注信息"
            :autoSize="{ minRows: 2, maxRows: 4 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '分类编码',
    dataIndex: 'code',
    key: 'code'
  },
  {
    title: '排序号',
    dataIndex: 'sort',
    key: 'sort'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: (text) => (text ? '启用' : '禁用')
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    ellipsis: true
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const data = [
  {
    id: '1',
    name: '理论课程',
    code: 'THEORY',
    sort: 1,
    status: true,
    remark: '主要包含理论教学课程'
  },
  {
    id: '2',
    name: '实践课程',
    code: 'PRACTICE',
    sort: 2,
    status: true,
    remark: '实验、实习等实践类课程'
  }
]

export default {
  data() {
    return {
      columns,
      data,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 3,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total) => `共 ${total} 条`
      },
      visible: false,
      confirmLoading: false,
      modalTitle: '新增分类',
      currentRecord: null,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onSearch(value) {
      console.log('搜索:', value)
    },
    showModal(type, record) {
      this.modalTitle = type === 'add' ? '新增分类' : '编辑分类'
      this.currentRecord = record || null
      this.visible = true

      this.$nextTick(() => {
        if (type === 'edit') {
          this.form.setFieldsValue({
            name: record.name,
            code: record.code,
            sort: record.sort,
            status: record.status,
            remark: record.remark
          })
        } else {
          this.form.resetFields()
        }
      })
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          console.log('提交数据:', values)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$message.success(this.modalTitle + '成功')
          }, 1000)
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    deleteCategory(id) {
      console.log('删除分类:', id)
      this.$message.success('删除成功')
    }
  }
}
</script>